<div class="card">
    {% if _has_login %}
    <div class="col-md-12">
        <textarea id="commentText" class="col-md-12"></textarea>
        <button class="btn-default" id="saveCommentBtn">评论</button>
    </div>
    {% end %}

    <div class="col-md-12" id="comments">
    </div>
</div>

<script type="text/javascript">
$(function () {

    function refreshComments() {    
        $.get("/note/comments", {note_id: "{{file.id}}"}, function (resp) {
            $("#comments").empty();
            for (var i = 0; i < resp.length; i++) {
                var item = resp[i];
                var html = $("<div>").addClass("comment-row");
                var user = $("<div>").addClass("comment-user").text(item.ctime + ", by " + item.user);
                var content = $("<div>").addClass("comment-content").text(item.content);

                html.append(content).append(user);
                $("#comments").append(html);
            }
        }).fail(function (resp) {
            console.log("请求失败", resp);
        });
    }

    refreshComments();

    $("#saveCommentBtn").click(function () {
        var comment = {
            note_id: "{{file.id}}",
            content: $("#commentText").val()
        };
        $.post("/note/comment/save", comment, function (resp) {
            console.log(resp);
            $("#commentText").val("");
            refreshComments();
        });
    })
})
</script>